<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="shortcut icon" href="https://www.moulem.com/img/favicon.ico" type="image/x-icon" />
    <title>Hello, world!</title>
    <link rel="stylesheet" href="index.min.css" />
</head>

<body data-spy="scroll" data-target="#navbarScroll">
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <a class="navbar-brand" href="#index">dolla</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto" id="navbarScroll">
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#discover">Discover</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">Service</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#sign">Sign Up</a>
                </li>
            </ul>
            <button class="btn btn-success text-dark" type="submit">
                Sign In
            </button>
        </div>
    </nav>

    <header>
        <div class="mid">
            <video autoplay muted loop>
                <source class="embed-responsive" src="./asset/1.mp4" type="video/mp4">
            </video>
            <div class="hero text-center">
                <h2 class="text-light display-4 font-weight-bold">
                    Virtual Banking Made Easy
                </h2>
                <p class="text-light mx-auto">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
                    maiores consequuntur ut error, dolore autem commodi quo.
                </p>
                <a href="#" class="text-dark">Get Started</a>
            </div>
        </div>
    </header>

    <section id="about" class="about py-5">
        <div class="row align-items-center container my-5 mx-auto">
            <div class="text col-lg-6 col-md-6 col-sm-12 w-50 pt-5 pb-5">
                <h6>PREMIUM BANK</h6>
                <h2>Unlimited Transaction with zero fees</h2>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa quis
                    tempore deleniti officiis sunt aliquam numquam alias nesciunt.
                </p>
                <a href="#">Learn More</a>
            </div>
            <div class="img col-lg-6 col-md-6 col-sm-12 w-50 pt-5 pb-5">
                <img src="./asset/1.svg" alt="图片" class="img-fluid" />
            </div>
        </div>
    </section>

    <section id="discover" class="discover py-5">
        <div class="row align-items-center container my-5 mx-auto">
            <div class="img col-lg-6 col-md-6 col-sm-12 w-50 pt-5 pb-5">
                <img src="./asset/2.png" alt="图片" class="img-fluid" />
            </div>
            <div class="text col-lg-6 col-md-6 col-sm-12 w-50 pt-5 pb-5">
                <h6>UNLIMITED ACCESS</h6>
                <h2>Login to your account at any time</h2>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa quis
                    tempore deleniti officiis sunt aliquam numquam alias nesciunt.
                </p>
                <a href="#">Learn More</a>
            </div>
        </div>
    </section>

    <section id="service" class="service py-5">
        <div class="col mx-auto align-items-center my-5">
            <div class="text-center pt-5">
                <h2 class="font-weight-bold pb-5 text-light">Our Service</h2>
            </div>
            <div class="row mx-auto justify-content-center align-items-center text-center container">
                <div class="one col-md-3 col-12 w-25 m-2">
                    <img src="./asset/1.svg" alt="pic" class="img-fluid w-75" />
                    <h5 class="font-weight-bold pt-5">Reduce Expenses</h5>
                    <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
                        voluptatem obcaecati dignissimos.
                    </p>
                </div>
                <div class="one col-md-3 col-12 w-25 m-2">
                    <img src="./asset/2.png" alt="pic" class="img-fluid w-75" />
                    <h5 class="font-weight-bold pt-5">Virtual Offices</h5>
                    <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
                        voluptatem obcaecati dignissimos.
                    </p>
                </div>
                <div class="one col-md-3 col-12 w-25 m-2">
                    <img src="./asset/3.png" alt="pic" class="img-fluid w-75" />
                    <h5 class="font-weight-bold pt-5">Premium Benefits</h5>
                    <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
                        voluptatem obcaecati dignissimos.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section id="sign" class="sign py-5">
        <div class="row align-items-center container my-5 mx-auto">
            <div class="text col-lg-6 col-md-6 col-sm-12 w-50 pt-5 pb-5">
                <h6>JOIN OUR TEAM</h6>
                <h2>Create an account is extremely easy</h2>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa quis
                    tempore deleniti officiis sunt aliquam numquam alias nesciunt.
                </p>
                <a href="#">Start Now</a>
            </div>
            <div class="img col-lg-6 col-md-6 col-sm-12 w-50 pt-5 pb-5">
                <img src="./asset/4.png" alt="图片" class="img-fluid" />
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="page-footer font-small stylish-color-dark pt-4 text-light">

        <!-- Footer Links -->
        <div class="container text-center text-md-left">

            <!-- Grid row -->
            <div class="row">

                <!-- Grid column -->
                <div class="col-md-4 mx-auto">

                    <!-- Content -->
                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Footer Content</h5>
                    <p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
                        consectetur
                        adipisicing elit.</p>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-2 mx-auto">

                    <!-- Links -->
                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                    <ul class="list-unstyled">
                        <li>
                            <a href="#!">Link 1</a>
                        </li>
                        <li>
                            <a href="#!">Link 2</a>
                        </li>
                        <li>
                            <a href="#!">Link 3</a>
                        </li>
                        <li>
                            <a href="#!">Link 4</a>
                        </li>
                    </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-2 mx-auto">

                    <!-- Links -->
                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                    <ul class="list-unstyled">
                        <li>
                            <a href="#!">Link 1</a>
                        </li>
                        <li>
                            <a href="#!">Link 2</a>
                        </li>
                        <li>
                            <a href="#!">Link 3</a>
                        </li>
                        <li>
                            <a href="#!">Link 4</a>
                        </li>
                    </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-2 mx-auto">

                    <!-- Links -->
                    <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                    <ul class="list-unstyled">
                        <li>
                            <a href="#!">Link 1</a>
                        </li>
                        <li>
                            <a href="#!">Link 2</a>
                        </li>
                        <li>
                            <a href="#!">Link 3</a>
                        </li>
                        <li>
                            <a href="#!">Link 4</a>
                        </li>
                    </ul>

                </div>
                <!-- Grid column -->

            </div>
            <!-- Grid row -->

        </div>
        <!-- Footer Links -->

        <hr>

        <!-- Call to action -->
        <ul class="list-unstyled list-inline text-center py-2">
            <li class="list-inline-item">
                <h5 class="mb-1">Register for free</h5>
            </li>
            <li class="list-inline-item">
                <a href="#!" class="btn btn-danger btn-rounded">Sign up!</a>
            </li>
        </ul>
        <!-- Call to action -->

        <hr>

        <!-- Social buttons -->
        <ul class="list-unstyled list-inline text-center">
            <li class="list-inline-item">
                <a class="btn-floating btn-fb mx-1">
                    <i class="fab fa-facebook-f"> </i>
                </a>
            </li>
            <li class="list-inline-item">
                <a class="btn-floating btn-tw mx-1">
                    <i class="fab fa-twitter"> </i>
                </a>
            </li>
            <li class="list-inline-item">
                <a class="btn-floating btn-gplus mx-1">
                    <i class="fab fa-google-plus-g"> </i>
                </a>
            </li>
            <li class="list-inline-item">
                <a class="btn-floating btn-li mx-1">
                    <i class="fab fa-linkedin-in"> </i>
                </a>
            </li>
            <li class="list-inline-item">
                <a class="btn-floating btn-dribbble mx-1">
                    <i class="fab fa-dribbble"> </i>
                </a>
            </li>
        </ul>
        <!-- Social buttons -->

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3">© 2020 Copyright:
            <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
        </div>
        <!-- Copyright -->

    </footer>
    <!-- Footer -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>

    </script>
</body>

</html>